<template>
  <div class="tag-item-container">
    <svg-icon :icon="icon"></svg-icon>
    <span :class="isActive ? 'active' : ''">{{ title }}</span>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  icon: {
    type: String,
    default: 'default-tag'
  },
  title: {
    type: String,
    default: '默认'
  },
  isActive: {
    type: Boolean,
    default: true
  }
})
</script>

<style lang="scss" scoped>
.tag-item-container {
  min-width: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  font-size: 12px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-style: italic;
  color: #ffffffb3;
  align-items: center;
  cursor: pointer;
}
.active {
  color: #1598f3;
}
</style>
